<template>
  <el-drawer
    title="title"
    v-model="drawerVisible"
    :with-header="false"
    :size="size + '%'"
    modal-class="details"
    :modal="modalShow"
    :close="handleClose"
  >
    <el-row style="padding-bottom: 20px">
      <slot name="drawerHeader">
        <el-col :span="20">
          <span @click="handleClose" style="cursor: pointer">
            <el-icon style="top: 4px"><ArrowLeft /></el-icon>
            &nbsp; <slot name="drawerHeaderTitle">测试数据接口</slot>
          </span>
        </el-col>
        <el-col :span="1" :push="3">
          <slot name="drawerHeaderRightButton">
            <!--            <el-button type="success" link>启用</el-button>-->
          </slot>
        </el-col>
      </slot>
    </el-row>
    <slot name="default">
      <el-form ref="formRef">
        <el-row gutter="20">
          <el-col v-for="(item, index) in props.formField" :key="index" :span="item.span ?? 8">
            <el-form-item
              :label="item.label"
              label-width="150px"
              :prop="item.prop"
              label-position="top"
              :rules="
                props.drawerType !== DrawerType.showData
                  ? item.isRules
                    ? item.rules
                    : [{ required: true, message: `${item.label}不能为空!`, trigger: 'blur' }]
                  : []
              "
            >
              <!--<el-input style="width: 200px" v-model="searchParam.keyword" placeholder="请输入内容" clearable />-->
              <el-input
                v-if="props.drawerType === DrawerType.showData"
                class="showData"
                :readonly="true"
                v-model="formData[item.prop]"
                v-bind="{ ...item.props }"
              ></el-input>
              <component v-else :is="`el-${item.type}`" v-model="formData[item.prop]" v-bind="{ ...item.props }">
                <template v-if="item.type === 'select'">
                  <component :is="`el-option`" v-for="col in item.enum" :key="col.value" :label="col.label" :value="col.value" />
                </template>
              </component>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider />
      <el-row gutter="20">
        <el-col :span="8">
          <el-form-item label="创建人" label-width="150px" label-position="top">
            <el-input
              :class="props.drawerType === DrawerType.showData ? 'showData' : 'editData'"
              v-model="formData.createUser"
              :readonly="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间" label-width="150px" label-position="top">
            <el-input
              v-if="props.drawerType === DrawerType.showData"
              class="showData"
              v-model="formData.createTime"
              :readonly="true"
            ></el-input>
            <el-date-picker v-else v-model="formData.createTime" :readonly="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </slot>
    <!--    <div class="table-box">
      <ProTable :data="talbeData" :columns="tableColumns" :pagination="false">
        <template #tableHeader>
          <el-button type="primary" text :icon="Plus">增加</el-button>
          <el-button type="primary" text :icon="Download">导出</el-button>
        </template>
        <template #operation>
          <el-button type="primary" link :icon="View" @click="ElMessage.info('test')">查看</el-button>
        </template>
      </ProTable>
    </div>-->
    <!-- // todo 底部按钮与右键菜单同步 考虑权限问题   -->
    <template #footer>
      <el-row v-if="props.drawerType !== DrawerType.showData">
        <slot name="footer">
          <el-col v-for="(item, index) in footerButtonList" :key="index" :span="4">
            <el-button v-if="item.type === 0" link type="primary">{{ item.label }}</el-button>
            <el-button v-else-if="item.type === -1" link type="danger">{{ item.label }}</el-button>
          </el-col>
        </slot>
      </el-row>
    </template>
  </el-drawer>
</template>
<script setup lang="ts" name="MyElDrawer">
import { ref, reactive, Ref, toRaw, computed, nextTick } from 'vue'
import { ArrowLeft, Download, Plus, View } from '@element-plus/icons-vue'
import { DrawerType, FormDataType, FormField, FormItem } from '@/components/MyElDrawer/interface'
import { temData } from '@/api/modules/login'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps } from '@/components/ProTable/interface'
import { ElMessage } from 'element-plus'

export interface MyElDrawerProps {
  formField?: FormField
  // formData?: FormDataType
  size?: number
  modalShow?: boolean
  drawerType?: DrawerType
  tableColumns?: ColumnProps[]
  talbeData?: any[]
}

const props = withDefaults(defineProps<MyElDrawerProps>(), {
  formField: () => [
    {
      prop: 'nameOfTheInstitution',
      label: '机构名称',
      type: 'input'
    },
    {
      prop: 'institutionalCloudCode',
      label: '机构云码',
      type: 'input'
    },
    {
      prop: 'institutionalFinancialCode',
      label: '机构财码',
      type: 'input'
    },
    {
      prop: 'customerFinancialCode',
      label: '客户财码',
      type: 'input'
    },
    {
      prop: 'supplierFinancialCode',
      label: '供应商财码',
      type: 'input'
    },
    {
      prop: 'abbreviationOfTheInstitution',
      label: '机构简称',
      type: 'input'
    },
    {
      prop: 'idNumber',
      label: '证件号码',
      type: 'input'
    },
    {
      prop: 'typeOfTax',
      label: '纳税类型',
      type: 'input'
    },
    {
      prop: 'region',
      label: '所在区域',
      type: 'input'
    },
    {
      prop: 'theNatureOfTheEnterprise',
      label: '企业性质',
      type: 'input'
    },
    {
      prop: 'groupAffiliation',
      label: '集团归属',
      type: 'input'
    },
    {
      prop: 'customerRatings',
      label: '客户评级',
      type: 'input'
    },
    {
      prop: 'email',
      label: '电子邮箱',
      type: 'input'
    },
    {
      prop: 'gisLongitude',
      label: 'GIS经度',
      type: 'input'
    },
    {
      prop: 'gisLatitude',
      label: 'GIS纬度',
      type: 'input'
    },
    {
      prop: 'parentAuthority',
      label: '上级机构',
      type: 'input'
    }
  ],
  /*formData: () => ({
    nameOfTheInstitution: 'test',
    institutionalCloudCode: 'test',
    institutionalFinancialCode: 'test',
    customerFinancialCode: 'test',
    supplierFinancialCode: 'test',
    abbreviationOfTheInstitution: 'test',
    idNumber: 'test',
    typeOfTax: 'test',
    region: 'test',
    theNatureOfTheEnterprise: 'test',
    groupAffiliation: 'test',
    customerRatings: 'test',
    email: 'test',
    gisLongitude: 'test',
    gisLatitude: 'test',
    parentAuthority: 'test',
    createUser: 'test',
    createTime: '2024-10-1'
  }),*/
  size: 100,
  modalShow: false,
  drawerType: DrawerType.showData,
  tableColumns: () => [
    {
      type: 'index',
      width: 80,
      label: '序号'
    },
    {
      prop: 'typeOfInstitution',
      label: '机构类型'
    },
    { prop: 'operation', label: '操作', fixed: 'right', width: 330 }
  ],
  talbeData: () => [
    {
      typeOfInstitution: 'test'
    }
  ]
})

let formRef = ref()
let formData = ref<FormDataType>({})
let drawerVisible = ref<boolean>(false)
let data = ref({})
/*let formData = ref<any>({
  nameOfTheInstitution: 'test',
  institutionalCloudCode: 'test',
  institutionalFinancialCode: 'test',
  customerFinancialCode: 'test',
  supplierFinancialCode: 'test',
  abbreviationOfTheInstitution: 'test',
  idNumber: 'test',
  typeOfTax: 'test',
  region: 'test',
  theNatureOfTheEnterprise: 'test',
  groupAffiliation: 'test',
  customerRatings: 'test',
  email: 'test',
  gisLongitude: 'test',
  gisLatitude: 'test',
  parentAuthority: 'test',
  createUser: 'test',
  createTime: '2024-10-1'
})*/
let footerButtonList = ref([
  { label: '修改客商', type: 0 },
  { label: '修改评级', type: 0 },
  { label: '分配类型', type: 0 },
  { label: '分配角色', type: 0 },
  { label: '机构下发', type: 0 },
  { label: '禁用', type: -1 }
])
// 字段信息
// const formField = ref<any[]>([
//   {
//     prop: 'nameOfTheInstitution',
//     label: '机构名称'
//   },
//   {
//     prop: 'institutionalCloudCode',
//     label: '机构云码'
//   },
//   {
//     prop: 'institutionalFinancialCode',
//     label: '机构财码'
//   },
//   {
//     prop: 'customerFinancialCode',
//     label: '客户财码'
//   },
//   {
//     prop: 'supplierFinancialCode',
//     label: '供应商财码'
//   },
//   {
//     prop: 'abbreviationOfTheInstitution',
//     label: '机构简称'
//   },
//   {
//     prop: 'idNumber',
//     label: '证件号码'
//   },
//   {
//     prop: 'typeOfTax',
//     label: '纳税类型'
//   },
//   {
//     prop: 'region',
//     label: '所在区域'
//   },
//   {
//     prop: 'theNatureOfTheEnterprise',
//     label: '企业性质'
//   },
//   {
//     prop: 'groupAffiliation',
//     label: '集团归属'
//   },
//   {
//     prop: 'customerRatings',
//     label: '客户评级'
//   },
//   {
//     prop: 'email',
//     label: '电子邮箱'
//   },
//   {
//     prop: 'gisLongitude',
//     label: 'GIS经度'
//   },
//   {
//     prop: 'gisLatitude',
//     label: 'GIS纬度'
//   },
//   {
//     prop: 'parentAuthority',
//     label: '上级机构'
//   }
// ])
const openDrawer = (row?: any) => {
  console.log(row)
  formData.value = toRaw(row)
  nextTick()
  drawerVisible.value = true
}
const handleClose = () => {
  formData.value = {}
  drawerVisible.value = false
}
defineExpose({ openDrawer })
</script>
<style scoped lang="scss">
.el-form-item {
  .el-form-item__content {
    .el-input {
      .el-input__wrapper {
        background: none;
        box-shadow: none;
      }
    }
  }
}
.showData {
  :deep(.el-input__wrapper) {
    cursor: default;
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
    .el-input__inner {
      cursor: default !important;
    }
  }
}
</style>
<style lang="scss">
.details {
  width: 50%;
  margin-right: 0;
  margin-left: 50%;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.el-drawer__container {
  float: right;
  width: 100%;
}
</style>
